<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <script src="./bootstrap/js/bootstrap.min.js"></script>

    <!-- fontawesome -->
    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <script src="./fontawesome/js/all.min.js"></script>
  </head>
  <body>
    <!--  -->
    <div id="list"></div>
    <!-- 操作导航 -->
    <div class="bg-body-tertiary p-2">
      <button data-action="addDepartment" class="btn btn-primary btn-sm">
        添加一级选项
      </button>
    </div>
    <!--  -->
    <div id="departmentsList"></div>
    <script type="module">
      import PocketBase from "./pocketbase.es.js";
      import {
        renderDepartmentsTable,
        getDepartmentsList,
        addDepartmentDialog,
        editDepartmentDialog,
        departmentsTreeRadioList,
      } from "./js/departments.js";
      import { _dialog, _on, _confirm } from "./utils/functions.js";
      const pb = new PocketBase("http://127.0.0.1:8090");

      const html = String.raw;

      getDepartmentsList();

      _on("click", {
        // 删除
        async deleteDepartment() {
          const id = this.dataset.id;
          if ((await _confirm("删除", "确定删除吗？")) === false) return;
          try {
            await pb.collection("departments").delete(id);
            getDepartmentsList();
          } catch (error) {}
        },
        // 编辑
        async editDepartment() {
          const id = this.dataset.id;
          // 回填
          try {
            const record = await pb.collection("departments").getOne(id);

            // 上级选项
            const records = await pb.collection("departments").getFullList({
              sort: "-sort",
            });
            pidRadioList.innerHTML = departmentsTreeRadioList(records);

            // ----
            document.editDepartmentForm.id.value = record.id;
            document.editDepartmentForm.label.value = record.label;
            document.editDepartmentForm.sort.value = record.sort;
            document.editDepartmentForm.pid.value = record.pid || 0;
            editDepartmentDialog.show();

            // 删除下属部门
            if (record.pid !== "") {
              document.querySelector(`[tree-list-id="${record.id}"]`).remove();
            }
          } catch (error) {}
        },
        // 取消编辑
        cancelEditDepartment() {
          editDepartmentDialog.hide();
        },

        // 确定编辑
        async saveEditDepartment() {
          //收集表单
          const id = document.editDepartmentForm.id.value;
          const pid = document.editDepartmentForm.pid.value;
          const data = {};
          data.label = document.editDepartmentForm.label.value;
          data.sort = document.editDepartmentForm.sort.value;
          data.pid = pid === "0" ? "" : pid;

          try {
            await pb.collection("departments").update(id, data);
            editDepartmentDialog.hide();
            getDepartmentsList();
          } catch (error) {}
        },

        addDepartment() {
          const pid = this.dataset.id; //上一级id
          if (pid !== undefined) {
            document.addDepartmentForm.pid.value = pid;
          }
          addDepartmentDialog.show();
        },
        cancelAddDepartment() {
          addDepartmentDialog.hide();
        },
        async saveAddDepartment() {
          // 收集表单数据
          const data = {};
          data.label = document.addDepartmentForm.label.value;
          data.sort = document.addDepartmentForm.sort.value;
          data.pid = document.addDepartmentForm.pid.value;
          try {
            const record = await pb.collection("departments").create(data);
            addDepartmentDialog.hide();
            getDepartmentsList();
          } catch (error) {
            console.log(error.message);
          }
        },
      });
    </script>
  </body>
</html>
